<template>
  <div id="main">
    <div id="form">
      <el-form :model="phone" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="客服电话"
          prop="phone"
        >
          <el-input v-model="phone" type="text" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div id="buttons">
        <el-button type="primary" @click="submitPhone">添加/修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getPhone, updatePhone } from '@/api/phone'
export default {
  data() {
    return {
      phone: '',
      type: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getPhone().then((resp) => {
        // if (resp.obj.servicePhoneNumber === '') {
        //   console.log(123)
        //   this.type = 1
        //   this.phone = ''
        // } else {
        this.phone = resp.obj.servicePhoneNumber
        this.type = 2
        // }
      })
    },
    submitPhone() {
      // if (this.type === 1) {
      //   addPhone(this.phone).then((resp) => {
      //     this.$notify({
      //       title: '操作成功',
      //       type: 'success'
      //     })
      //     this.fetchData()
      //   })
      // } else {
      updatePhone(this.phone).then((resp) => {
        this.$notify({
          title: '操作成功',
          type: 'success'
        })
        this.fetchData()
      })
      // }
    }
  }
}
</script>

<style scoped>
  #main{
    width: 100%;
  }

  #form{
    border: #E4E7ED 1px solid;
    border-radius: 30px;
    padding: 50px;
    margin: 50px auto;

    width: 900px;

  }
  #buttons{
    text-align: center;
  }

</style>
